<template>
  <div id="Home">
    <input type="file" @change="handleFileChange" style="margin-right: 17px">
    <el-button type="primary" plain @click="executeFunctions" style="margin-left: 17px"
      >RUN</el-button
    >

    <div id="IO">
	  <!-- 显示图片的 Base64 编码 -->
      <el-input
        type="textarea"
        :autosize="{ minRows: 11, maxRows: 11 }"
        placeholder="Base64 编码"
        v-model="base64Data"
        size="large"
      >
      </el-input>
	  <!-- 显示图片的url  -->
      <el-input
        type="textarea"
        :autosize="{ minRows: 11, maxRows: 11 }"
        placeholder="URL"
        v-model="imageUrl"
        size="large"
      >
      </el-input>
    </div>
  </div>
</template>

<script>
	import axios from 'axios';
	import qs from 'qs';
	export default {
	    data() {
	      return {
	        base64Data: '',
	        cleanedBase64String: '',
			    imageUrl: '', // 存储图片的 URL
	      };
	    },

	    methods: {
	      handleFileChange(event) {
	        const file = event.target.files[0];
	        const reader = new FileReader();
	        reader.onload = () => {
	          this.base64Data = reader.result;
	        };
	        reader.readAsDataURL(file);
	      },

	      removePrefix() {
	        this.cleanedBase64String = this.base64Data.replace(/^data:image\/[^;]+;base64,/, '');
	      },

	      //发图发送
	      sendImgBase64() {
	        const requestBody = {
	          body: this.cleanedBase64String
	        };
		    axios
		      .post('https://6b36b4e7983f47239aed30599335b947.apig.cn-north-4.huaweicloudapis.com/file-upload-water', // 替换为实际的 A 接口地址
		        qs.stringify(requestBody),
		        {
		          withCredentials: false // 设置 withCredentials 属性为 false
		        })
		      .then(response => {
		        // 发送请求到下载接口获取图片的 URL
		        axios
		          .get('https://6b36b4e7983f47239aed30599335b947.apig.cn-north-4.huaweicloudapis.com/getUrl') // 使用提供的下载接口，并传递图片的 URL 参数
		          .then(downloadResponse => {
		            // 获取下载接口的响应数据，可能是图片的 URL
		            const imageUrlFromDownload = downloadResponse.data; // 假设返回的响应中包含图片的 URL
		            // 将获取的图片 URL 赋值给 imageUrl
		            this.imageUrl = imageUrlFromDownload;
		          })
		          .catch(downloadError => {
		            console.error('Error fetching image from download interface:', downloadError);
		          });
		      })
		      .catch(error => {
		        console.error('Error uploading image to A interface:', error);
		      });
	      },
        redirectToImgUrl(){
            window.location.href = this.imageUrl; // 进行页面跳转到imgUrl
        },
	      executeFunctions() {
	        this.removePrefix();
	        this.sendImgBase64();

          setTimeout(() => {
            this.redirectToImgUrl();
          }, 3000);
          //this.redirectToImgUrl();
          //alert('图片生成成功！');
	      }

	    }
	  };
</script>

<style>
#IO {
  display: flex;
  justify-content: center;
  margin: 27px 17px;
}
.el-input--large {
  margin: 17px;
  font-size: 27px !important;
}
</style>
